<template>
	<view class="main">
		<!-- @custom 是用于点击右侧控件时候触发. -->
		<u-search placeholder="enter就是搜索" :clearabled="true" @search="search" @custom="search" class="search"></u-search>
		<!-- 这里是layout格栅布局 -->
			<view v-for="(goods, index) in goodsList" :key="index" class="u-waterfall">
				<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
				<view class="goods">
					<view class="goods-image">
						<!-- 这里的：就是 v-bind 双向绑定的缩写 -->
						<image :src="goods.image"></image>
					</view>
					<view class="goods-name">
						<!-- 这里使用v-html可以显示外入的样式 -->
						<text v-html="goods.name"></text>
					</view>
					<view class="goods-price">
						<text >{{goods.price}}</text>
					</view>
					<view class="goods-shop">
						<text>{{goods.shop}}</text>
					</view>
		
				</view>
			</view>

	</view>
</template>



</view>
</view>
</template>

<script>
	import GoodsList from '../waterfall_layout/waterfall_layout.vue'
	export default {

		data() {
			return {
				serverUrl: this.serverUrl,
				goodsList: []
			}
		},
		components: {
			// 这里定义你导入组件的component
			goodsList: GoodsList
		},
		//加载时候加载数据
		onLoad() {
			console.log("onLoad()");
			var serverUrl = this.serverUrl;
			console.log(serverUrl);
		},
		methods: {
			//点击搜索
			search(e) {
				uni.request({
					url: this.serverUrl + '/list/' + e,
					method: 'POST',
					data: {},
					success: res => {
						console.log("list 请求success");
						this.goodsList = res.data.data;
						this.globalGoodList = this.goodsList;
					},
					fail: () => {
						console.log("list 请求fail");
					},
					complete: () => {
						console.log("list 请求complete");
					}
				});
			}
		}

	}
</script>
<style>

</style>
